<template>
  <div class="su-material-container">
    <el-tabs v-model="activeName" @tab-click="handleClick">
      <el-tab-pane label="Manager" name="manager">
        <div class="table-cover">
          <el-table
            :data="managerList"
            stripe
            style="width: 100%">
            <el-table-column
              prop="id"
              label="ID"
              width="100">
            </el-table-column>
            <el-table-column
              prop="username"
              label="Name"
              width="100"
            >
            </el-table-column>
            <el-table-column
              prop="telephone"
              label="Telephone"
              width="150"
            ></el-table-column>
            <el-table-column
              prop="telephone"
              label="Username"
              width="150"
            >
            </el-table-column>

            <el-table-column
              prop="password"
              label="Password"
              width="150"
            >
            </el-table-column>
            <el-table-column
              prop="address"
              label="Address"
            >
            </el-table-column>
            <el-table-column
              fixed="right"
              label="Operation"
              width="100">
              <template slot-scope="scope">
                <el-button @click="handleMana(scope.row)" type="text" size="small">edit</el-button>
                <el-button @click="deleteMana(scope.row)" type="text" size="small">delete</el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </el-tab-pane>
      <el-tab-pane label="User" name="user">
        <div class="table-cover">
          <el-table
            :data="userList"
            stripe
            style="width: 100%">
            <el-table-column
              prop="id"
              label="ID"
              width="100">
            </el-table-column>
            <el-table-column
              prop="username"
              label="Name"
              width="100"
            >
            </el-table-column>
            <el-table-column
              prop="telephone"
              label="Telephone"
              width="150"
            ></el-table-column>
            <el-table-column
              prop="telephone"
              label="Username"
              width="150"
            >
            </el-table-column>
            <el-table-column
              prop="password"
              label="Password"
              width="150"
            >
            </el-table-column>
            <el-table-column
              prop="address"
              label="Address"
            >
            </el-table-column>
            <el-table-column
              fixed="right"
              label="Operation"
              width="100">
              <template slot-scope="scope">
                <el-button type="text" size="small" @click="handleUser(scope.row)">edit</el-button>
                <el-button type="text" size="small" @click="deleteUser(scope.row)">delete</el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
        <div class="block">
          <el-pagination
            background
            layout="prev, pager, next"
            :page-size="10"
            :total="api.userList.length"
            :current-page="page"
            @current-change="changepage"
          >
          </el-pagination>
        </div>
      </el-tab-pane>
    </el-tabs>
    <el-dialog
      title="Edit"
      :visible.sync="dialogVisible"
      width="50%"
    >
      <el-row type="flex" justify="center">
        <el-col :span="12">
          <div>
            Username:
            <el-input
              v-model="userInfo.telephone"
              :disabled="true">
            </el-input>
          </div>
          <div>
            Password:
            <el-input
              v-model="userInfo.password"
              :disabled="false">
            </el-input>
          </div>
          <div>
            Telephone:
            <el-input
              v-model="userInfo.telephone"
              :disabled="true">
            </el-input>
          </div>
          <div>
            Name:
            <el-input
              v-model="userInfo.username"
              :disabled="true">
            </el-input>
          </div>
          <div>
            Address:
            <el-input
              v-model="userInfo.address"
            >
            </el-input>
          </div>
        </el-col>
      </el-row>

      <span slot="footer" class="dialog-footer">
    <el-button type="primary" @click="dialogVisible = false">Confirm</el-button>
  </span>
    </el-dialog>
  </div>
</template>

<script>
  export default {
    name: "GDFunctionSuUser",
    data() {
      return {
        activeName: 'manager',
        userList: [],
        dialogVisible: false,
        userInfo: {},
        managerList: [],
        page: 1,
      }
    },
    methods: {
      handleClick() {
      },
      handleMana(e) {
        this.userInfo = e;
        this.dialogVisible = true;
      },
      handleUser(e) {
        this.userInfo = e;
        this.dialogVisible = true;
      },
      changepage(page) {
        this.page = page;
        this.userList = this.api.getUserList(page - 1);
      },
      deleteMana(e) {
        this.managerList = this.api.deleteManager(e.id);
      },
      deleteUser(e) {
        this.api.deleteUser(e.id);
        this.userList = this.api.getUserList(this.page - 1);
      }
    },
    mounted() {
      this.userList = this.api.getUserList();
      this.managerList = this.api.getManagerList();
    },
    computed: {}
  }
</script>

<style scoped>
  .su-material-container {
    width: calc(100% - 20px);
    height: 100%;
    border-radius: 4px;
    margin-bottom: 20px;
    margin-left: 10px;
    margin-right: 10px;
  }

  .block {
    margin-left: calc(50% + 150px);
    margin-top: 20px;
    transform: translateX(-50%);
  }

  .table-cover {
    margin-bottom: 20px;
    background: #fff;
    border-radius: 4px;
    width: calc(100% - 20px);
  }
</style>
